WebP와 `<picture>` 태그를 활용한 이미지 최적화

웹 성능 최적화에서 이미지 최적화는 매우 중요한 요소입니다.
이미지 최적화를 통해 페이지 로딩 속도를 개선하고, 사용자의 데이터 사용량을 줄이며, SEO에도 긍정적인 영향을 미칠 수 있습니다.

1️⃣ WebP란?

WebP(Web Picture format)는 Google에서 개발한 차세대 이미지 포맷으로, PNG, JPEG보다 더 높은 압축률을 제공하면서도 화질 저하가 적은 특징을 가집니다.

포맷	압축 방식	장점	단점
JPEG	손실 압축	색 표현력이 뛰어나고 용량이 작음	투명도 지원 ❌
PNG	무손실 압축	투명도 지원 가능	파일 크기가 큼
GIF	무손실 압축	애니메이션 지원 가능	색상이 256개로 제한됨
WebP	손실 + 무손실	JPEG보다 25~35% 압축 효율이 높고, 투명도 & 애니메이션 지원	구형 브라우저 일부 미지원

✔️ WebP는 JPG보다 최대 35% 용량이 작고, PNG보다 26% 더 효율적인 압축을 제공!
✔️ 투명도 및 애니메이션 지원 가능 (GIF 대체 가능)

2️⃣ `<picture>` 태그를 활용한 최적화

모든 브라우저가 WebP를 지원하지 않기 때문에 <picture> 태그를 사용하여 브라우저 호환성을 유지하면서 최적화할 수 있습니다.

🔹 WebP + Fallback (JPG, PNG) 적용 예시

<picture>
  <source srcset="image.webp" type="image/webp"> //✅ WebP 지원 브라우저 → image.webp을 로드
  <source srcset="image.jpg" type="image/jpeg"> //✅ WebP 미지원 브라우저 → image.jpg로 대체
  <img src="image.jpg" alt="최적화된 이미지">
</picture>

✔️ WebP가 지원되지 않는 브라우저에서도 안전하게 이미지 제공 가능!
✔️ SEO 및 접근성을 위해 alt 속성을 추가하는 것이 중요!

3️⃣ WebP 최적화 & 변환 방법

🔹 Squoosh 사용 (웹 변환 도구)

👉 Squoosh 사이트에서 이미지를 WebP로 변환 가능

✔️ 사용 방법

squoosh.app 접속

변환할 이미지를 업로드

WebP 포맷 선택 후 최적화

🔹 CLI (명령어로 변환)

cwebp -q 80 image.jpg -o image.webp

✔️ -q 80 → 품질을 80%로 설정하여 변환

🔹 Next.js에서 자동 변환 (Next/Image 사용)

import Image from "next/image";

export default function Home() {
  return (
    <Image src="/image.jpg" width={500} height={300} alt="WebP 최적화 이미지" />
  );
}

✔️ Next.js에서는 자동으로 WebP 변환 및 최적화 제공!

4️⃣ WebP + Lazy Loading + Responsive 적용

WebP를 활용하면 반응형 디자인(REsponsive) 과 지연 로딩(Lazy Loading) 까지 적용하면 더욱 강력한 최적화를 할 수 있습니다.

🔹 반응형 + Lazy Loading 적용 예시

<picture>
  <source srcset="image-480w.webp" type="image/webp" media="(max-width: 480px)">
  <source srcset="image-800w.webp" type="image/webp" media="(max-width: 800px)">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="반응형 최적화 이미지" loading="lazy">
</picture>

✔️ 브라우저 크기에 따라 적절한 WebP 이미지 제공
✔️ loading="lazy" → 사용자가 화면을 스크롤할 때만 이미지를 로드하여 성능 최적화

WebP와 <picture> 태그를 활용한 이미지 최적화